<template>
    <div style="padding-left: 17px;">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-setting"></i> 个人设置
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-form
                :model="ruleForm"
                status-icon
                :rules="rules"
                ref="ruleForm"
                label-width="80px"
                class="demo-ruleForm"
            >
                <el-form-item label="账号" prop="age" style="width:350px">
                    <el-input v-model.number="ruleForm.age" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="旧密码" prop="oldpass" style="width:350px">
                    <el-input type="password" v-model="ruleForm.oldpass" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="pass" style="width:350px">
                    <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="checkPass" style="width:350px">
                    <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import Qs from 'qs';
export default {
    name: 'baseform',
    data() {
        var validatePass = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入密码'));
            }
            setTimeout(() => {
                if (value.toString().length <= 18 && value.toString().length >= 6) {
                    if (this.ruleForm.checkPass !== '') {
                        this.$refs.ruleForm.validateField('checkPass');
                    }
                    callback();
                } else {
                    callback(new Error('请输入6~18位数'));
                }
            }, 1000);
        };
        var validatePass2 = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'));
            } else if (value !== this.ruleForm.pass) {
                callback(new Error('两次输入密码不一致!'));
            } else {
                callback();
            }
        };
        return {
            //值
            ruleForm: {
                age: $cookies.get('tokenuser'), //账号
                oldpass: '', //旧密码
                pass: '', //新密码
                checkPass: '' //确认密码
            },
            //表单验证规则
            rules: {
                pass: [{ validator: validatePass, trigger: 'blur' }],
                checkPass: [{ validator: validatePass2, trigger: 'blur' }]
            }
        };
    },

    methods: {
        //提交
        submitForm(formName) {
            if (this.ruleForm.pass.length <= 18 && this.ruleForm.pass.length >= 6) {
                this.$http
                    .post(
                        '/api/api/user/password',
                        Qs.stringify({
                            name: this.ruleForm.age, //用户账号
                            form: $cookies.get('tokenform'), //用户身份（0公司 1机构 2客服）
                            token: $cookies.get('tokenpa').token, //当前登录令牌
                            oldpass: this.ruleForm.oldpass, //待添加昵称
                            newpass1: this.ruleForm.pass, //待添加密码1
                            newpass2: this.ruleForm.checkPass //待添加密码2
                        }),
                        { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }
                    )
                    .then(obtain => {
                        if (obtain.body.code == 200) {
                            this.$message.success(obtain.body.msg);
                            //this.$refs[formName].resetFields();
                            this.$router.push('/');
                        } else {
                            this.$message.error(obtain.body.msg);
                        }
                    })
                    .catch(fail => {
                        this.$message.error({
                            message: '服务器请求失败...'
                        });
                    });
            } else {
                this.$message.error('请输入6~18位数密码');
            }
        }, //重置
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    }
};
</script>
<style  scoped>
</style>